<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="cn zh">
<head >
    <meta charset="UTF-8">
    <title>我的当当</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/user.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            //个人信息编辑功能
            $("span:eq(0)").click(function () {
                $("#content").html("<div id=\"userMessage\">\n" +
                    "                    <table>\n" +
                    "                        <tr style=\"height:35px;\">\n" +
                    "                            <td align=\"right\">呢称：</td>\n" +
                    "                            <td ><input name=\"userName\"></td>\n" +
                    "                        </tr>\n" +
                    "                        <tr style=\"height: 35px;\">\n" +
                    "                            <td align=\"right\">密码：</td>\n" +
                    "                            <td ><input name=\"password\" type='password'></td>\n" +
                    "                        </tr>\n" +
                    /*"                        <tr style=\"height: 35px;\">\n" +
                    "                            <td align=\"right\">再次输入密码：</td>\n" +
                    "                            <td ><input name=\"password2\"></td>\n" +
                    "                        </tr>\n" +*/
                    "                    </table>\n" +
                    "                   &nbsp&nbsp&nbsp&nbsp&nbsp<input type=\"button\" value=\"提交\" id='submit'>\n" +
                    "               </div>")
                //提交修改后的个人信息
                $("#submit").click(function () {
                    var userName=$("[name=userName]").val()
                    var password=$("[name=password]").val()
                    if(userName==""||password==""){
                        alert("请将用户呢称和密码填写完整");
                    }else {
                        if(password.length<6){
                            alert("密码长度不能小于6！")
                        }else {
                            $.ajax({
                                type:"post",
                                url:"/userServlet",
                                data:{
                                    "doType":"doUpdate",
                                    "userName":userName,
                                    "password":password
                                },
                                success:function (data) {
                                    if(data==0){
                                        alert("信息修改失败！")
                                    }else{
                                        alert("修改成功！需重新登录账户。")
                                        window.setTimeout(function(){
                                            window.location.href="${pageContext.request.contextPath}/login.jsp";
                                        },1000);
                                    }
                                }
                            })
                        }
                    }
                })
            })


            //添加收件人地址
            $("span:eq(1)").click(function () {
                $("#content").html("<p id=\"p1\"><span >添加收件人地址</span></p>\n" +
                    "            <div id=\"address\">\n" +
                    "                <form method=\"post\" action=\"login\">\n" +
                    "                    <table >\n" +
                    "                        <tr>\n" +
                    "                            <td>收货人姓名：</td>\n" +
                    "                            <td><input name='name'></td>\n" +
                    "                            <td>请填写有效收获人姓名</td>\n" +
                    "                        </tr>\n" +
                    "                        <tr>\n" +
                    "                            <td>收件人详细地址：</td>\n" +
                    "                            <td><input name='address2'></td>\n" +
                    "                            <td>请填写有效的收件人的详细地址</td>\n" +
                    "                        </tr>\n" +
                    "                        <tr>\n" +
                    "                            <td>邮政编码：</td>\n" +
                    "                            <td><input name='postcode'></td>\n" +
                    "                            <td>请填写有效的收件人的邮政编码</td>\n" +
                    "                        </tr>\n" +
                    "                        <tr>\n" +
                    "                            <td>电话：</td>\n" +
                    "                            <td><input name='phone'></td>\n" +
                    "                            <td>请填写有效的收件人的电话&nbsp&nbsp&nbsp&nbsp<span style=\"color: blue\">选填项</span></td>\n" +
                    "                        </tr>\n" +
                    "                        <tr>\n" +
                    "                            <td>手机：</td>\n" +
                    "                            <td><input name='mobilePhone'></td>\n" +
                    "                            <td>请填写有效的收件人的手机</td>\n" +
                    "                        </tr>\n" +
                    "                    </table>\n" +
                    "                </form>\n" +
                    "                    <input type=\"reset\" value=\"取消\"> <input type=\"submit\" value=\"下一步\">\n" +
                    "            </div>")
                $("tr>td:first-child").addClass("text1")
                $("tr>td:last-child").addClass("text3")
                $("tr>td:first-child").next().addClass("text2")

                //验证收件人是否为空
                function name1() {
                    if($("[name=name]").val()==""){
                        $("[name=name]").parent().next().addClass("text")
                        return false;
                    }else {
                        $("[name=name]").parent().next().removeClass("text")
                    }
                }
                //验证收件人地址是否为空
                function site() {
                    if($("[name=address2]").val()==""){
                        $("[name=address2]").parent().next().addClass("text")
                        return false;
                    }else {
                        $("[name=address2]").parent().next().removeClass("text")
                    }
                }
                //验证邮政编码是否为空
                function postcode1() {
                    if($("[name=postcode]").val()==""){
                        $("[name=postcode]").parent().next().addClass("text")
                        return false;
                    }else {
                        $("[name=postcode]").parent().next().removeClass("text")
                    }
                }
                //验证收件人手机号码是否为空
                function mobilePhone1() {
                    if($("[name=mobilePhone]").val()==""){
                        $("[name=mobilePhone]").parent().next().addClass("text")
                        return false;
                    }else {
                        $("[name=mobilePhone]").parent().next().removeClass("text")
                    }
                }

                //提交地址信息
                $("[value='下一步']").click(function () {
                   name1();
                   site();
                   postcode1();
                   mobilePhone1();
                    var addressId=$("[name=address]").val()
                    $("[name=userId]").val(addressId)
                    if(name1()==false||site()==false||postcode1()==false||mobilePhone1()==false){
                        alert("请填写完收件人信息")
                    }else {
                        var name=$("[name=name]").val();
                        var address=$("[name=address2]").val();
                        var postcode=$("[name=postcode]").val();
                        var phone=$("[name=phone]").val();
                        var mobilePhone=$("[name=mobilePhone]").val();
                        $.ajax({
                            type:"post",
                            url:"/login/addressServlet",
                            data:{
                                "doType":"doInsert",
                                "name":name,
                                "address2":address,
                                "postcode":postcode,
                                "phone":phone,
                                "mobilePhone":mobilePhone
                            },
                            success:function (data) {
                                if(data==0){
                                    alert("添加地址失败！")
                                }else {
                                    alert("添加成功！")
                                }
                            }
                        })
                    }
                })

                $("[name=name]").blur(function () {
                    name1();
                })
                $("[name=address2]").blur(function () {
                    site();
                })
                $("[name=postcode]").blur(function () {
                    postcode1();
                })
                $("[name=mobilePhone]").blur(function () {
                    mobilePhone1();
                })

            })


            //查看/修改收件人地址
            $("span:eq(2)").click(function () {

                $.ajax({
                    type:"post",
                    url:"/login/addressServlet",
                    dataType:"json",
                    data:{
                        "doType":"doQuery",
                        "type":"queryAll"
                    },
                    success:function (data) {
                        var temp=" <div id=\"address1\">\n" +
                            "            <table border=\"1\" style=\"border-collapse: collapse\">\n" +
                            "                <caption><p>地址信息表</p></caption>\n" +
                            "                <thead>\n" +
                            "                <tr>\n" +
                            "                    <th>收件人姓名</th>\n" +
                            "                    <th>收件人地址</th>\n" +
                            "                    <th>邮政编码</th>\n" +
                            "                    <th>电话</th>\n" +
                            "                    <th>手机</th>\n" +
                            "                    <th>删除</th>\n" +
                            "                    <th>变更</th>\n" +
                            "                </tr>\n" +
                            "                </thead>"+
                            "                <tbody>\n"

                        for (var i=0;i<data.length;i++){
                            temp+="<input type=hidden value=\""+data[i].addressId+"\" >"+"                <tr style=\"height: 50px;text-align: center\">\n" +
                                "                    <td style=\"width: 150px;\"><input name=\"\" value=\""+data[i].name+"\"></td>\n" +
                                "                    <td style=\"width: 350px;\"><input name=\"\" size=\"50\" value=\""+data[i].site+"\"></td>\n" +
                                "                    <td style=\"width: 150px;\"><input name=\"\" value=\""+data[i].postcode+"\"></td>\n" +
                                "                    <td style=\"width: 150px;\"><input name=\"\" value=\""+data[i].phone+"\"></td>\n" +
                                "                    <td style=\"width: 150px;\"><input name=\"\" value='"+data[i].mobilePhone+"'></td>\n" +
                                "                    <td style=\"width:100px;color: blue\"><span class='delete'>删除</span></td>\n" +
                                "                    <td style=\"width:100px;color: blue\"><span class='update'>更改</span></td>\n" +
                                "                </tr>\n"
                        }
                        temp+="</tbody>\n" +
                            "            </table>\n" +
                            "        </div>"
                       if(data.length>0){
                           $("#content").html(temp);
                       }else {
                           $("#content").html("您还未添加任何收件人地址！");
                       }

                        //删除地址信息操作
                        $(".delete").each(function () {
                            $(this).click(function () {
                                var node=$(this).closest("tr")
                                var addressId=node.prev().val();
                                $.ajax({
                                    type:"post",
                                    url:"/login/addressServlet",
                                    data:{
                                        "doType":"doDelete",
                                        "addressId":addressId
                                    },
                                    success:function (data) {
                                        if(data==0){
                                            alert("删除失败！")
                                        }else {
                                            node.remove();
                                        }
                                    }
                                })
                            })
                        })

                        //更改地址信息操作
                        $(".update").each(function () {
                            $(this).click(function () {
                                var node=$(this).closest("tr")
                                var addressId=node.prev().val();
                                var node1=$(this).closest("td")
                                var name=node1.prev().prev().prev().prev().prev().prev().children().val();
                                var address=node1.prev().prev().prev().prev().prev().children().val()
                                var postcode=node1.prev().prev().prev().prev().children().val();
                                var phone=node1.prev().prev().prev().children().val();
                                var mobilePhone=node1.prev().prev().children().val();
                                $.ajax({
                                    type:"post",
                                    url:"/login/addressServlet",
                                    data:{
                                        "doType":"doUpdate",
                                        "addressId":addressId,
                                        "name":name,
                                        "address":address,
                                        "postcode":postcode,
                                        "phone":phone,
                                        "mobilePhone":mobilePhone
                                    },
                                    success:function (data) {
                                        if(data==0){
                                            alert("更改失败！")
                                        }else {
                                            alert("更改成功！")
                                        }
                                    }
                                })
                            })
                        })
                    }
                })



            })

            //查看订单信息
            $("span:eq(3)").click(function () {

                $.ajax({
                    type:"post",
                    url:"/login/createOrderServlet",
                    dataType:"json",
                    data:{
                        "doType":"doQuery",
                        "type":"user"
                    },
                    success:function (data) {
                        var temp="<div id=\"order\" >\n" +
                            "                <table border=\"1\" style=\"border-collapse: collapse\">\n" +
                            "                    <caption><p>订单信息表</p></caption>\n" +
                            "                    <thead>\n" +
                            "                    <tr>\n" +
                            "                        <th>订单ID</th>\n" +
                            "                        <th>总价</th>\n" +
                            "                        <th>地址ID</th>\n" +
                            "                        <th>操作</th>\n" +
                            "                    </tr>\n" +
                            "                    </thead>\n" +
                            "                    <tbody>\n"

                        for(var i=0;i<data.length;i++){
                            temp+= "                    <tr style=\"height: 50px;text-align: center\">\n" +
                                "                        <td style=\"width: 200px;\">"+data[i].id+"</td>\n" +
                                "                        <td style=\"width: 200px;\">"+data[i].price+"</td>\n" +
                                "                        <td style=\"width: 300px;\">"+data[i].addressId+"</td>\n" +
                                "                        <td style=\"width: 150px;color: blue\">" +
                                "<a href='/login/orderDetails?doType=doQuery&orderId="+data[i].id+"' target=\"_blank\">查看详情</a></td>\n" +
                                "                    </tr>\n"
                        }
                        temp+="</tbody>\n" +
                            "                </table>\n" +
                            "            </div>"
                       if(data.length>0){
                           $("#content").html(temp);
                       }else {
                           $("#content").html("您还未购买过商品！");
                       }

                    }
                })

            })
        })

    </script>
</head>
<body>
    <div id="container"  align="center">
        <!--页面头部栏-->
        <div id="head">
            <iframe src="${pageContext.request.contextPath}/head.jsp"width="100%"height="100%"scrolling="no"frameborder="0">
            </iframe>
        </div>

        <!--注册信息栏-->
        <div id="center">
            <div id="menu">
                <div id="text">
                    菜单
                </div>
                <div class="content">
                    <h3>个人信息管理</h3>
                    <span>个人信息修改</span><br>
                </div>
                <div class="content">
                    <h3>收件人地址管理</h3>
                    <span>添加收件人地址</span><br>
                    <span>查看/修改收件人地址</span>
                </div>
                <div class="content">
                    <h3>订单信息管理</h3>
                    <span>查看订单</span><br>
                    <span></span>
                </div>
            </div>
            <div id="content">
                欢迎使用当当网个人信息管理系统！
            </div>
        </div>

        <!--页面脚注栏-->
        <div id="foot">
            <iframe src="${pageContext.request.contextPath}/foot.jsp"width="100%"height="100%"scrolling="no"frameborder="0">
            </iframe>
        </div>
    </div>
</body>
</html>
